<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jq-1.12.4.js"></script>
    <script src="../js/bootstrap.js"></script>
    <style>
        .banner {
            background-image: url(../img/bg3.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 1200px;
        }

        .top {
            text-align: center;
            color: #23CDB7;
        }

        .line {
            text-align: center;
            margin-top: 20px;
        }

        .img-wrap {
            margin-top: 50px;
        }

        .img p {
            width: 262px;
            font-size: 15px;
            text-align: center;
            height: 30px;
            color: white;
            line-height: 30px;
            margin-top: 10px;
            background-color: rgba(104, 83, 73, 0.4);
        }
    </style>
</head>

<body>
    <div class="container-fluid  banner">
        <div class="container title">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-sm-12 top">
                    <h1>学英语，看世界！小美带你GO学员微电影</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-sm-12 line"><img src="../img/block-split.png" alt=""></div>
            </div>
        </div>
        <div class="container img-wrap">
            <div class="row img">
                <div class="col-md-3 col-sm-6 col-xs-12"><img src="../img/4.jpg" alt=""
                        class="img-responsive img-thumbnail">
                    <p>学员旅行微电影-清迈篇</p>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12"><img src="../img/5.jpg" alt=""
                        class="img-responsive img-thumbnail">
                    <p>学员旅行微电影-斯里兰卡篇</p>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12"><img src="../img/6.jpg" alt=""
                        class="img-responsive img-thumbnail">
                    <p>小美带你GO-精彩花絮1</p>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12"><img src="../img/7.jpg" alt=""
                        class="img-responsive img-thumbnail">
                    <p>小美带你GO-精彩花絮2</p>
                </div>
            </div>
        </div>
    </div>

</body>

</html>